<!--
 * @Author: White
 * @description: 商品详情页
 * @LastEditTime: 2021-07-08 19:50:35
-->

<template>
  <div class="main">
    <!-- 顶部 -->
    <!-- <div class="header">
      <div class="header-left">
        <img class="header-left-back" src="../../assets/images/icon_fanhui@3x.png">
      </div>
      <div class="header-right">
        <div class="header-right-share" @click="shareshow = true">
          <img class="header-left-back" src="../../assets/images/icon_fenxiang@3x.png">
        </div>
        <div class="header-right-email">
          <img class="header-left-back" src="../../assets/images/icon_fankui@3x.png">
        </div>
      </div>
    </div> -->

    <!-- 商品 -->
    <div class="shop">
      <!-- 商品轮播 -->
      <van-swipe class="my-swipe" :autoplay="30000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banners.images" :key="index" @click="bannerLink(item.link)">
          <img :src="item + '?x-oss-process=image/auto-orient,1/quality,q_90/watermark,image_aW1hZ2VzL3NodWl5aW4ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMjAvYnJpZ2h0LDIw,g_se,t_90,x_10,y_10'">
        </van-swipe-item>
      </van-swipe>
      
      <!-- 商品介绍 -->
      <div class="shop-detail">
        <div class="shop-price">￥{{banners.salePrice}}</div>
        <div class="shop-name">
          <div class="shop-specific">{{banners.bName}}  {{banners.keyWord}}</div>
        </div>
        <div class="shop-low-price">
          <div class="new-price">
            <span class="new-people">新人8折</span>
            <span class="old-people">￥{{banners.marketPrice}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="china-Li">
      <h1>{{this.banners.bName}}</h1>
    </div>

    <!-- 商品介绍 -->
    <div class="shop-detail">
      <!-- 商品详情 -->
      <div class="shop-introduce">
        <h1>商品介绍</h1>
        <p>{{banners.description}}</p>
      </div>
      <!-- 商品大图 -->
      <div class="shop-picture">
        <h1>商品详情</h1>
        <!-- 下面都是图 -->
        <div class="detail-img">
          <div class="html" v-html="this.shopDetail">{{banners.desc}}</div>
        </div>
      </div>

      <!-- 购物须知 -->
      <div class="buy-reading">
        <div class="important">
          <h1>购物须知</h1>
        </div>
        <div class="list">
          <div class="express">
            <div class="txt"><span class="title">关于物流：</span>平台发货快为默认选择，如需指定快递请在下单时明确备注，如未备注平台依旧为默认快递。</div>
          </div>
          <div class="express">
            <div class="txt"><span class="title">关于发货：</span>拍下宝贝48小时内发货（国家法定节假日、天气等不可抗拒客官因素除外）</div>
          </div>
          <div class="express">
            <div class="txt"><span class="title">关于退货：</span>七天无理由退货时，如因质量问题造成的退换货费用由我们全部承担，如非质量问题（尺寸与想象有差距、不喜欢等原因）造成的退换货费用由用户自理。</div>
          </div>
          <div class="express">
            <div class="txt"><span class="title">关于尺码：</span>商品的尺寸仅为参考依据，根据不同商品特性及测量手段，可能会存在尺寸的细微差异，属正常情况。</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 为你推荐 -->
    <div class="recommend">
      <h1>为你推荐</h1>
      <div class="recommend-list">
        <div class="recommend-item" v-for="(item, index) in shopList" :key="index" @click="infomation(item)">
          <div class="item-picture">
            <img :src="item.pic">
          </div>
          <div class="item-content">
            <div class="shop-title">
              {{item.brandName}} {{item.categoryTypeName}} {{item.name}}
            </div>
            <div class="shop-desc">
              <div class="price">
                <span class="new">{{item.marketPrice}}</span>
                <span class="old">{{item.salePrice}}</span>
              </div>
              <div class="tag">
                <span>新人9折起</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分享弹出层 -->
    <van-popup class="pop-share" v-model="shareshow" position="bottom" :style="{ height: '318px' }">
      <div class="title">分享至</div>
      <div class="terrace-list">
        <div class="terrace-item" v-for="(item, index) in share" :key="index" @click="shareBtn(item.text)">
          <div class="imgborder"><img :src="item.img"></div>
          <div class="imgdesc">{{item.text}}</div>
        </div>
      </div>
      <div class="cancel">
        <span @click="shareshow = false">取消</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getDetails, getShopList } from '@/server/api';
import share from '@/utils/share';
import shareway from '../shareway'
export default {
  mixins: [share],
  data() {
    return {
      ID: '',
      shareshow: false,
      banners: {},
      shopDetails: [],
      shopList: [],
      share: shareway,
      shopDetail:''
    }
  },
  created() {
    // 获取另一个页面的商品id
    this.id = this.$route.query.supId;
    if(this.id) {
      this.getdata(this.id)
    } else {
      this.getdata(38)
    }
  },

  methods: {
    // 当前(单个)商品
    async getdata(id) {
      console.log(id)
      const res = await getDetails(id)
      this.banners = res.data.data.spu;  //轮播图和介绍描述商品名称价格等
      console.log(res)
      this.shopDetail=this.banners.desc.replace(/png/ig,"png?x-oss-process=image/auto-orient,1/quality,q_90/watermark,image_aW1hZ2VzL3NodWl5aW4ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMjAvYnJpZ2h0LDIw,g_se,t_90,x_10,y_10");
      if (res.data.data.spuVos) {
        this.shopList = res.data.data.spuVos
      } else {
        this.getShopList(this.banners.categoryTypeId, 1)
      }
    },

    // 为你推荐-商品列表
    async getShopList(id, pageNum) {
      console.log('123')
      const res = await getShopList(id, pageNum);
      this.shopList = res.data.data;
      console.log(res)
    },

    // 轮播跳转
    bannerLink(url) {
      console.log(url)
    },

    // 推荐跳转商品，传ID即可
    infomation(item) {
      console.log(item)
      this.$router.push({
          path:'ShopGoods',
          query: {
              supId: item.categoryId,
          }
      })
      this.getdata(item.categoryId)
    },

    // 分享
    shareBtn(type) {
      switch (type) {
        case '微信好友':
          console.log('wxhy')
          break;
        case '朋友圈':
          console.log('pyq')
          break;
        case 'QQ好友':
          this.shareToQQ()
          break;
        case 'QQ空间':
          this.shareToRoom()
          break;  
        case '新浪微博':
          this.shareToMicroblog()
          break;
        case '复制链接':
          this.copy();
          break;
        default:
          break;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  @import './ShopGoods.scss';
</style>
<style lang="scss">
.my-swipe .van-swipe-item {
  font-size: 20px;
  text-align: center;
  background-color: #fff;
  img {
    width: 295px;
    margin-top: 105px;
  }
}

.van-swipe__indicator {
  width: 6px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background-color: #D8D8D8 !important;
}

.van-swipe__indicator--active {
  width: 14px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background-color: #121318 !important;
}


.detail-img {
  width: 100%;
  .html {
    p {
      img {
        width: 100% !important;
        height: auto;
      }
    }
  }
}
</style>
 